<template>
  <div class="container">
    <div class="demo">
      <van-button @click="changeTheme(1)">切换白色</van-button>
      <van-button @click="changeTheme(2)">切换蓝色</van-button>
      <van-button @click="changeTheme(3)">切换红色</van-button>
      <van-button @click="changeTheme(4)">切换黑色</van-button>
    </div>
    <div class="myDiv">变色区域测试</div>
  </div>
</template>

<script>
import { type, ninenum_filter } from '@/utils/utils';
export default {
  data() {
    return {
      message: '15158066634',
      idcard: '371202198908154013',
      bankcard: '299292292992929299',
      name: '张三'
    };
  },
  created() {
    const a = { a: '2' };
    const b = type(a);
    console.log(b);
    const d = ninenum_filter(999);
    console.log(d);
  },
  methods: {
    changeTheme(type) {
      document.getElementById('app').setAttribute('class', `theme_${type}`);
      window.localStorage.setItem('themeType', type);
    }
  }
};
</script>
<style lang="less" scoped>
.demo {
  display: flex;
  flex-direction: column;
  > .van-button {
    width: 80%;
    margin-left: 10%;
    margin-top: 10px;
  }
}
.myDiv {
  font-size: 24px;
  margin: 20px;
  height: 200px;
  line-height: 200px;
  border-radius: 10px;
  text-align: center;
}
</style>
